<template>
  <backContainer>
    <!--    添加loading效果-->
    <card
      :top="24"
      :height="'calc(100vh - 68px - 18px - 60px)'"
      class="learningSituation"
      v-loading="loading"
    >
      <div>
        <div style="display: flex; padding: 30px; box-sizing: border-box">
          <div class="flex">
            <!-- 考勤-->
            <div
              v-if="
                $route.query.courseType != 3 &&
                courseStuNormal.attendanceScorePercentage > 0
              "
              class="selfDatescore selfDatescoreCard1"
            >
              <div class="selfDatescorebox">
                <div class="selfDatescore-title flex">
                  <div class="selfDatescore-title-t1">考勤</div>
                  <div class="selfDatescore-title-t2">
                    满分{{ courseStuNormal.initialAttendanceScore || '--' }}分
                  </div>
                </div>
              </div>

              <div class="dateScore flex">
                <div
                  :style="{
                    paddingLeft: $route.query.courseType != 3 ? '18px' : '44px',
                  }"
                >
                  {{
                  courseStuNormal.attendanceScore ||
                  courseStuNormal.attendanceScore == 0
                  ? courseStuNormal.attendanceScore
                  : '--'
                  }}
                </div>
                <div
                  :style="{
                    width: $route.query.courseType != 3 ? '100%' : 'auto',
                  }"
                  @click="attendancedetail()"
                  class="detailText"
                >
                  详情
                </div>
              </div>
            </div>
            <!-- 纪律 -->
            <div
              v-if="
                $route.query.courseType != 3 &&
                courseStuNormal.disciplineScorePercentage > 0
              "
              class="selfDatescore selfDatescoreCard2"
            >
              <div class="selfDatescorebox">
                <div class="selfDatescore-title flex">
                  <div class="selfDatescore-title-t1">纪律</div>
                  <div class="selfDatescore-title-t2">
                    初始分{{ courseStuNormal.initialDisciplineScore || '--' }}分
                  </div>
                </div>
              </div>

              <div class="dateScore flex">
                <div
                  :style="{
                    paddingLeft: $route.query.courseType != 3 ? '18px' : '44px',
                  }"
                >
                  {{ courseStuNormal.disciplineScore || '--' }}
                </div>
                <div
                  :style="{
                    width: $route.query.courseType != 3 ? '100%' : 'auto',
                  }"
                  @click="dataScoredetail(3)"
                  class="detailText"
                >
                  详情
                </div>
              </div>
            </div>
            <!-- 课堂表现  -->
            <div
              v-if="courseStuNormal.usualScorePercentage > 0"
              :class="$route.query.courseType != 3 ? 'minicard' : 'width364'"
              class="selfDatescore selfDatescoreCard3"
            >
              <div class="selfDatescorebox">
                <div class="selfDatescore-title flex">
                  <div class="selfDatescore-title-t1">课堂表现</div>
                  <div class="selfDatescore-title-t2">
                    初始分{{ courseStuNormal.initialUsualScore || '--' }}分
                  </div>
                </div>
              </div>

              <div class="dateScore flex">
                <div
                  :style="{
                    paddingLeft: $route.query.courseType != 3 ? '18px' : '44px',
                  }"
                >
                  {{ courseStuNormal.usualScore || '--' }}
                </div>
                <div
                  :style="{
                    width: $route.query.courseType != 3 ? '100%' : 'auto',
                  }"
                  @click="dataScoredetail(1)"
                  class="detailText"
                >
                  详情
                </div>
              </div>
            </div>
            <!-- 其他 -->
            <div
              v-if="
                $route.query.courseType != 3 &&
                courseStuNormal.otherScorePercentage > 0
              "
              class="selfDatescore selfDatescoreCard4"
            >
              <div class="selfDatescorebox">
                <div class="selfDatescore-title flex">
                  <div class="selfDatescore-title-t1">其他</div>
                  <div class="selfDatescore-title-t2">
                    初始分{{ courseStuNormal.initialOtherScore || '--' }}分
                  </div>
                </div>
              </div>

              <div class="dateScore flex">
                <div
                  :style="{
                    paddingLeft: $route.query.courseType != 3 ? '18px' : '44px',
                  }"
                >
                  {{ courseStuNormal.otherScore || '--' }}
                </div>
                <div
                  :style="{
                    width: $route.query.courseType != 3 ? '100%' : 'auto',
                  }"
                  @click="dataScoredetail(4)"
                  class="detailText"
                >
                  详情
                </div>
              </div>
            </div>
          </div>
          <!-- 小组得分 -->
          <div
            class="groupMemberbox"
            :style="{ width: $route.query.courseType != 3 ? '416px' : '516px' }"
          >
            <!-- <div v-if="leaderId" class="groupMemberbox"> {{ groupMemberList.length }}-->
            <div class="groupmember">
              小组成员
              <span>小组平均成绩：{{ avgScore ? avgScore : '-' }}分</span>
            </div>
            <div
              v-if="groupMemberList && groupMemberList.length > 0"
              class="flex courseInfobox"
              v-loading="loading"
            >
              <div
                class="item"
                v-for="(item, index) in groupMemberList"
                :key="index"
              >
                <div class="student_name">
                  {{
                  item.studentName
                  }}<img
                  v-if="item.isLeader == 1"
                  src="@/assets/images/tags_icon.png"
                  alt="加载失败"
                />
                </div>
                <div class="student_num">
                  {{ item.studentNum }}
                </div>
              </div>
            </div>
            <div
              v-else
              style="height: 120px; font-size: 14px; color: #909399"
              class="flexCen flexColCenter"
            >
              暂无小组成员~
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- 课程目录 -->
        <div class="chapterBox">
          <div class="topLine">
            <div class="course_title">课程目录</div>
            <div @click="handlechange" class="btns">
              <img
                v-if="!isClose"
                src="@/assets/images/courseAdd/expand.png"
                alt="加载失败"
              />
              <img
                v-else
                src="@/assets/images/courseAdd/shrink.png"
                alt="加载失败"
              />
              {{ !isClose ? "展开" : "收起" }}
            </div>
          </div>
          <div class="course_tree">
            <courseStudyTrees
              :nodeWidth="'660'"
              :nodeCanSelected="true"
              @handleClick="handleClick"
              ref="course_trees_ref"
              :data="courseIndexTree"
              :leaderId="leaderId"
              :studentId="$store.getters.studentId"
              @refresh="getStudentStudyIndexList"
            >
            </courseStudyTrees>
          </div>
        </div>
        <!-- 学习成果  v-if="
            LearningProgress.learningResultState == 0 ||
            (LearningProgress.learningResultState == 1 &&
              LearningProgress.learningProgress == 100)
          "-->
        <div class="studyResult">
          <div class="topLine flexBet">
            <div class="course_title">学习成果</div>
            <img
              class="shou fullScreen"
              src="@/assets/images/studyResults/quanping.png"
              alt="加载失败"
              @click="fullScreen"
            />
          </div>
          <div class="content">
            <studyResultByTime
              num="3"
              size="mini"
              ref="studyResultByTimeDia"
              height="calc(100vh - 60px - 420px)"
            ></studyResultByTime>
          </div>
        </div>
      </div>
      <!-- 学习成果弹窗 -->
      <el-dialog
        top="1vh"
        title="学习成果"
        width="960px"
        :visible.sync="studyResultByTime_open"
      >
        <studyResultByTime
          num="5"
          ref="studyResultByTimeDia_fullScreen"
        ></studyResultByTime>
        <div slot="footer" class="dialog-footer flexEnd">
          <el-button type="primary" @click="studyResultByTime_open = false"
          >关 闭
          </el-button
          >
        </div>
      </el-dialog>
    </card>

    <!-- 考勤  -->
    <el-drawer
      :with-header="false"
      title="课堂表现"
      :visible.sync="showDrawer"
      size="700px"
      direction="rtl"
      :before-close="
        () => {
          showDrawer = false;
        }
      "
    >
      <div style="height: 100vh" class="rela">
        <!-- 头部 -->
        <div class="drawer-title flexBet">
          <div class="t1">考勤</div>
        </div>
        <!-- 信息 -->
        <div class="drawer-content">
          <div class="drawer-content-info flex">
            <div>
              <div class="drawer-content-item flex">
                课&nbsp;&nbsp;程：
                <div class="overTxt">{{ classShowDetail_row.courseName }}</div>
              </div>
            </div>
            <div>
              <div class="drawer-content-item flex">
                授课班级：
                <div class="overTxt">{{ classShowDetail_row.className }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <div class="drawer-table data_table" style="margin-top: 16px">
          <el-table
            border
            v-loading="loading"
            :data="drawerList"
            height="calc(100vh - 200px - 86px)"
          >
            <el-table-column
              show-overflow-tooltip
              label="节次"
              align="center"
              prop="attendanceNames"
            >
              <template slot-scope="scope">
                {{ scope.row.assessmentTime }} {{ scope.row.attendanceNames }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="考勤情况"
              align="center"
              prop="status"
            >
              <template slot-scope="scope">
                <span
                  :class="[scope.row.status !== 0 ? 'red' : '']"
                  v-for="(item, index) in status"
                  :key="index"
                  v-if="item.value == scope.row.status"
                >
                  {{ item.label }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="分数变动"
              align="center"
              prop="score"
              width="80"
            >
              <template slot-scope="scope">
                {{
                scope.row.score > 0 ? '+' + scope.row.score : scope.row.score
                }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="考勤老师"
              align="center"
              prop="teacherName"
            >
            </el-table-column>
            <el-table-column align="center" prop="remark" label="打分备注">
              <template slot-scope="scope">
                {{ scope.row.remark ? scope.row.remark : '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="search_bar flexEnd absolute" style="bottom: 56px">
          <div
            class="normalBtn w88"
            @click="showDrawer = false"
            style="margin-right: 56px"
          >
            关 闭
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 纪律 其他 弹框 -->
    <classShowDetail
      :showDrawer.sync="classShowDetail_open"
      :usualType="classShowDetail_usualType"
      :courseStuId="classShowDetail_courseStuId"
      :row="classShowDetail_row"
    ></classShowDetail>

    <!--  -->
  </backContainer>
</template>

<script>
import { attendanceStudentList } from '@/api/tea_studentGrade/attendance'
import editAttendanceDia from '@/views/tea_studentGrade/components/editAttendanceDia'
import StudyResultByTime from '@/components/studyResultByTime.vue'
import { studentStudyIndexList } from '@/api/home'
import { groupMemberInfo } from '@/api/exam/exam'
import { formatTreeData } from './formatTreeDataToStudy'
import courseStudyTrees from './components/courseStudyTrees'
import datescoreDetail from './components/dateScoredetail'
import { getClassNormal, getcourseStuNormalBase } from '@/api/usually/usually'
import classShowDetail from '@/views/tea_studentGrade/components/classShowDetail'

export default {
  components: {
    classShowDetail,
    editAttendanceDia,
    courseStudyTrees,
    datescoreDetail,
    StudyResultByTime
  },
  props: {},
  data() {
    return {
      status: [
        { value: 0, label: '正常', sort: 6 },
        { value: 1, label: '请假', sort: 5 },
        { value: 2, label: '早退', sort: 4 },
        { value: 3, label: '迟到', sort: 3 },
        { value: 4, label: '迟到&早退', sort: 2 },
        { value: 5, label: '旷课', sort: 1 }
      ],
      classShowDetail_open: false,
      classShowDetail_usualType: '',
      classShowDetail_courseStuId: '',
      classShowDetail_row: {},
      courseStuNormal: {},
      // 考勤 纪律 其他 弹框
      showDrawer: false,
      drawerList: [{ edit: false }],
      //
      studyResultByTime_open: false,
      studyResultByTime_item: '',
      //
      loading: false,
      leaderId: '',
      avgScore: 0,
      isClose: true,
      //课程目录
      courseIndexTree: [],
      groupMemberList: [],
      courseName: '',
      courseId: '',
      selfdScroe: '--',
      homeworScroe: '--',
      dateavgScore: '',
      courseStuId: '',
      postList: [],
      homeworList: [],
      LearningProgress: '',
      //用于成果的文件预览显示lable
      preview: {
        coursePath: '',
        courseName: '',
        studentId: '',
        studentName: ''
      }
    }
  },
  watch: {},
  methods: {
    // 用于生成xx/xxx/xxxx
    async getPathToNode(nodes, targetId, pathAccumulator = []) {
      for (const node of nodes) {
        // 如果当前节点匹配目标ID，说明路径构建完成，返回累积的路径
        if (node.indexId === targetId) {
          return [...pathAccumulator, node.indexName] // 包含当前节点名称
        }

        // 递归查找子节点中的路径
        if (node.children && node.children.length > 0) {
          // 将当前节点的名称添加到路径中，然后递归查找
          const result = await this.getPathToNode(node.children, targetId, [
            ...pathAccumulator,
            node.indexName
          ])
          if (result) {
            return result // 找到路径，返回
          }
        }
      }

      return null // 未找到目标节点，返回null
    },
    // 节点点击 以及 初始化选中加载
    async handleClick(e) {
      // 获取路径
      this.getPathToNode(this.courseIndexTree, e.indexId).then(async(path) => {
        this.preview = {
          coursePath: path ? path.join('/') : '',
          courseName: this.courseName,
          studentId: '',
          studentName: ''
        }
        console.log('获取路径', path.join('/'))
        // // 第一次获取肯定是空的 防止二次调取该接口
        // if (this.LearningProgress == "") {
        //   await this.getLearningProgress();
        // }
        // // 有权限的时候才会去获取学习成果
        // if (
        //   this.LearningProgress.learningResultState == 0 ||
        //   (this.LearningProgress.learningResultState == 1 &&
        //     this.LearningProgress.learningProgress == 100)
        // ) {
        this.studyResultByTime_item = e
        this.$refs.studyResultByTimeDia.getALLresult(e, '')
        // }
      })
    },
    // 全屏
    fullScreen() {
      this.studyResultByTime_open = true
      this.$nextTick(() => {
        this.$refs.studyResultByTimeDia_fullScreen.getALLresult(
          this.studyResultByTime_item,
          ''
        )
      })
    },
    // 获取班级和课程名称
    async getClassNormalList() {
      let res = await getClassNormal(this.$route.query.courseSchedulingId)
      if (res.code == 200) {
        this.classShowDetail_row = res.data
      }
    },
    // 获取平时分
    async courseStuNormalList() {
      let res = await getcourseStuNormalBase(this.$route.query.courseStuId)
      if (res.code == 200) {
        this.courseStuNormal = res.data
      }
    },
    async groupMemberInfo() {
      this.loading = true
      let res = await groupMemberInfo(this.$route.query.courseStuId)
      const { code, data } = res
      if (code == 200) {
        this.loading = false
        this.avgScore = data.avgScore ? data.avgScore : ''
        this.groupMemberList = data.groupMemberList ? data.groupMemberList : []
        if (this.groupMemberList.length > 0) {
          for (const groupMemberListElement of this.groupMemberList) {
            if (groupMemberListElement.isLeader == 1) {
              this.leaderId = groupMemberListElement.studentId
            }
          }
        }
      }
    },
    // 展开关闭操作
    handlechange() {
      this.isClose = !this.isClose
      if (this.isClose) {
        this.$refs.course_trees_ref.expandAll()
      } else {
        this.$refs.course_trees_ref.collapseAll()
      }
    },
    // 获取学习进度课程目录
    async getStudentStudyIndexList() {
      let res = await studentStudyIndexList(this.$route.query.courseStuId)
      const { code, data } = res
      if (code == 200) {
        console.log(data, 'data')
        this.courseName = data.indexName
        this.courseId = data.indexId
        this.courseStuId = data.courseStuId
        this.courseIndexTree = formatTreeData(data.children)
      }
    },
    // 前往考勤需要courseSchedulingId
    async attendancedetail() {
      this.showDrawer = true
      // 获取考勤详情
      this.loading = true
      try {
        let queryParams = {}
        queryParams.courseSchedulingId = this.$route.query.courseSchedulingId
        queryParams.studentId = this.$store.getters.studentId
        let res = await attendanceStudentList(queryParams)
        const { code, data } = res
        if (code == 200) {
          data.map((item) => {
            this.status.map((sitem) => {
              if (item.status + '' == sitem.value + '') {
                item.sort = sitem.sort
              }
            })
          })
          this.drawerList = data
          console.log(data)
          this.drawerList.sort((a, b) => {
            return a.sort - b.sort
          })
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 前往表现分 需要courseStuId usualType 班级和课程名称也要
    dataScoredetail(type) {
      console.log('dataScoredetail', type)
      this.classShowDetail_open = true
      this.classShowDetail_usualType = type
      this.classShowDetail_courseStuId = this.$route.query.courseStuId
    }
  },
  created() {
  },
  mounted() {
    this.getStudentStudyIndexList()
    this.groupMemberInfo()
    this.getClassNormalList()
    this.courseStuNormalList()
  }
}
</script>
<style scoped lang="scss">
.selfDatescoreCard1 {
  background-image: url("../../assets/images/card1bg.png");
  background-size: cover;
}

.selfDatescoreCard2 {
  background-image: url("../../assets/images/card2bg.png");
  background-size: cover;
}

.selfDatescoreCard3 {
  background-image: url("../../assets/images/card3bg.png");
  background-size: cover;
}

.selfDatescoreCard4 {
  background-image: url("../../assets/images/card4bg.png");
  background-size: cover;
}

.drawer-table {
  margin: 16px 20px 0 32px;
}

.drawer-content {
  padding: 6px 0 0 32px;

  .drawer-content-info {
    background-image: url("../../assets/images/scoreBg2.png");
    background-size: 648px 54px;
    width: 648px;
    height: 54px;
    border-radius: 8px;

    .drawer-content-item {
      width: 295px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #788295;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      margin: 14px 0 0 24px;

      div {
        width: 210px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}

.drawer-title {
  box-sizing: border-box;
  height: 70px;
  border-bottom: 1px solid #edeff0;
  padding: 0 32px;

  .t1 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 70px;
    text-align: left;
    font-style: normal;
  }

  .t2 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 70px;
    font-style: normal;
  }
}

.currentName {
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #333333;
  line-height: 18px;
}

.infobox {
  width: 272px;
  min-height: 346px;
  background: white;
  border-radius: 16px;
  padding-bottom: 10px;
  box-sizing: border-box;
  margin-top: 24px;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: -40px 0 0 96px;
  }

  .name {
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    margin-top: 8px;
  }

  .id {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    margin-top: 8px;
  }

  .major {
    font-size: 14px;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    margin-top: 4px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edeff0;
  }

  .box {
    padding: 20px 24px 0 24px;

    .ancestorsName {
      margin: 10px 0 0 10px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
    }

    .progress {
      width: 234px;
      margin-bottom: 5px;
      margin-top: 20px;
    }

    .day {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 17px;
    }

    .rate {
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 14px;
    }
  }
}

.learningSituation {
  overflow: auto;

  .courseInfobox {
    margin: 10px 0 0 20px;
    display: flex;
    max-height: 120px;
    overflow: auto;
    flex-wrap: wrap;
    align-content: flex-start;

    .item {
      width: 190px;
      //height: 41px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      //padding: 20px;
      //box-sizing: border-box;
      //border-radius: 20px;
      //background: #f5f7ff;
      //border: 1px solid #dae1fa;
      //margin: 0 10px 10px 0;
      margin-bottom: 20px;
      margin-right: 40px;

      .student_name {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 14px;

        img {
          margin-left: 6px;
        }
      }

      .student_num {
        color: #999999;
        font-size: 14px;
      }
    }
  }

  .topLine {
    width: 100%;
    display: flex;
    align-items: center;

    .fullScreen {
      margin-right: 30px;
      width: 15px;
      height: 15px;
    }

    .course_title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
    }

    .btns {
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      margin-left: 10px;

      img {
        margin: 0 4px 0 0;
        width: 16px;
        height: 16px;
      }
    }
  }

  .studyResult {
    border-top: 1px solid #edeff0;
    width: 455px;
    padding: 20px 0 0 40px;
    box-sizing: border-box;
  }

  .chapterBox {
    width: 740px;
    border-top: 1px solid #edeff0;
    border-right: 1px solid #edeff0;
    padding: 20px 20px 0 30px;
    box-sizing: border-box;

    .course_tree {
      width: 100%;
      margin-top: 10px;
      height: calc(100vh - 470px);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .chapters {
      height: calc(100vh - 68px - 18px - 60px - 300px);
      overflow: auto;
    }

    .chapters::-webkit-scrollbar {
      display: none;
    }

    .chapter {
      height: 48px;
      align-items: center;
      border-bottom: 1px solid #edeff0;

      .name {
        box-sizing: border-box;
        width: 600px;
        margin-left: 15px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }

      .status {
        align-items: center;

        .makeUp {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #999999;
          line-height: 20px;

          span {
            color: #e95756;
          }
        }

        .icon1 {
          margin-left: 24px;
          border-radius: 50%;
          width: 8px;
          height: 8px;
          box-sizing: border-box;
          border: 2px solid #28b28b;
        }

        .icon2 {
          margin-left: 24px;
          border-radius: 50%;
          box-sizing: border-box;
          width: 8px;
          height: 8px;
          background: #28b28b;
          border: 2px solid #28b28b;
        }

        .icon-1 {
          margin-left: 24px;
          border-radius: 50%;
          box-sizing: border-box;
          width: 8px;
          height: 8px;
          background: #ffffff;
          border: 2px solid #e95756;
        }

        .icon0 {
          margin-left: 24px;
          border-radius: 50%;
          width: 8px;
          height: 8px;
          box-sizing: border-box;
          background: #ffffff;
          border: 2px solid #2cacff;
        }

        .label {
          margin-left: 16px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
      }
    }
  }
}

.name_bold {
  color: #333333 !important;
  font-weight: bold !important;
  margin: 10px 0 0 0 !important;
}

.groupmember {
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  padding: 19px;
  box-sizing: border-box;
  border-bottom: 1px solid #ffe8e3;

  span {
    margin-left: 16px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}

.selfDatescorebox {
  height: 108px;
}

.minicard {
  width: 300px;
}

.width364 {
  width: 364px;
}

.selfDatescore {
  overflow: hidden;
  height: 202px;
  width: 173px;
  background-repeat: no-repeat;
  margin-right: 7px;

  .selfDatescore-title {
    flex-direction: row;
    align-items: start; /* 让子元素自动拉伸 */
    justify-content: start;
    padding: 24px 0 0 20px;
    box-sizing: border-box;
    gap: 8px; /* 设置行和列之间的间距 */
    .selfDatescore-title-t1 {
      width: 80px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 20px;
      color: #333333;
      height: 22px;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      margin-right: 16px;
    }

    .selfDatescore-title-t2 {
      height: 22px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 15px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }

  .dateScore {
    div:first-child {
      padding-left: 20px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 40px;
      color: #333333;
      line-height: 36px;
      text-align: left;
      font-style: normal;
    }

    div:last-child {
      margin-left: 12px;
      padding: 19px 20px 0 0;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #2cacff;
      line-height: 20px;
      text-align: right;
      font-style: normal;
      cursor: pointer;
    }
  }
}

.groupMemberbox {
  height: 202px;
  background: #fef5f3;
  border-radius: 12px;
  border: 1px solid #ffe8e3;
}

.red {
  color: red;
}
</style>
